import React, {Component} from 'react';
import {StyleSheet, ScrollView, Animated} from 'react-native';
import {
  View,
  Text,
  Carousel,
  Spacings,
  Colors,
  Constants,
  Button
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const BACKGROUND_COLORS = [
  Colors.red50,
  Colors.blue50,
  Colors.green50,
  Colors.yellow50,
  Colors.purple50,
];

const CarouselPage = ({index, label, color, width, height}: any) => (
  <View 
    style={{
      flex: 1, 
      backgroundColor: color, 
      justifyContent: 'center', 
      alignItems: 'center',
      borderWidth: 1,
      borderColor: Colors.grey60,
      width: width, 
      height: height
    }}
  >
    <Text text50 grey10>{label || `Page ${index}`}</Text>
  </View>
);

const PropSection = ({ title, propName, children }: {title: string, propName: string, children: React.ReactNode}) => (
  <View style={styles.sectionContainer}>
    <Text text70 grey10 marginB-10>{title} (属性: <Text text70 purple30>{propName}</Text>)</Text>
    {children}
  </View>
);

export default class CarouselScreen extends Component {
  scrollX = new Animated.Value(0);
  heightAnim = new Animated.Value(120);

  state = {
    currentPageIndex: 0,
    scrollOffset: 0,
    isExpanded: false, 
  };

  renderPages = (count = 3, customWidth?: number, customHeight?: number) => {
    return Array.from({length: count}).map((_, index) => (
      <CarouselPage 
        key={index} 
        index={index} 
        color={BACKGROUND_COLORS[index % BACKGROUND_COLORS.length]}
        width={customWidth}
        height={customHeight}
      />
    ));
  };

  toggleHeight = () => {
    const targetHeight = this.state.isExpanded ? 120 : 250;
    
    Animated.timing(this.heightAnim, {
      toValue: targetHeight,
      duration: 500, 
      useNativeDriver: false
    }).start();

    this.setState({isExpanded: !this.state.isExpanded});
  }

  render() {
    return (
      <TestSuite name="Carousel">
        <ScrollView contentContainerStyle={styles.scrollContent}>
          <TestCase itShould="horizontal: 控制滚动方向">
            <PropSection title="水平滚动 (默认)" propName="horizontal=true">
              <Carousel containerStyle={{height: 150}} horizontal>
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
            
            <PropSection title="垂直滚动" propName="horizontal=false">
              <Carousel containerStyle={{height: 150}} horizontal={false}>
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="autoplay & loop: 自动轮播与无限循环">
            <PropSection title="自动播放 + 循环 (间隔1秒)" propName="autoplay | loop | autoplayInterval">
              <Carousel 
                containerStyle={{height: 150}} 
                autoplay={true}
                autoplayInterval={1000}
                loop={true}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>

            <PropSection title="静态 + 不循环" propName="autoplay=false | loop=false">
              <Carousel 
                containerStyle={{height: 150}} 
                autoplay={false} 
                loop={false}
                initialPage={0}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="pageWidth & itemSpacings: 卡片式布局">
            <PropSection title="pageWidth:250px & itemSpacings:20px" propName="pageWidth | itemSpacings">
              <Carousel 
                containerStyle={{height: 150}} 
                pageWidth={250}
                itemSpacings={20}
                containerMarginHorizontal={20}
                initialPage={1}
              >
                 {this.renderPages(3, 250)}
              </Carousel>
            </PropSection>
             
            <PropSection title="pageWidth:200px & itemSpacings:40px" propName="pageWidth | itemSpacings">
              <Carousel 
                containerStyle={{height: 150}} 
                pageWidth={200}
                itemSpacings={40}
                containerMarginHorizontal={20}
                initialPage={1}
              >
                 {this.renderPages(3, 200)}
              </Carousel>
            </PropSection>
          </TestCase>

          
          <TestCase itShould="containerMarginHorizontal测试">
            <PropSection title="containerMarginHorizontal={20}" propName="containerMarginHorizontal">
              <Carousel 
                containerStyle={{height: 150}} 
                pageWidth={250}
                containerMarginHorizontal={20}
                initialPage={1}
              >
                 {this.renderPages(3, 250)}
              </Carousel>
            </PropSection>
             
            <PropSection title="containerMarginHorizontal={50}" propName="containerMarginHorizontal">
              <Carousel 
                containerStyle={{height: 150}} 
                pageWidth={200}
                containerMarginHorizontal={50}
                initialPage={1}
              >
                 {this.renderPages(3, 200)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="PageControl & Counter: 不同的指示器样式">
            <PropSection title="圆点指示器 (底部)" propName="pageControlPosition | pageControlProps">
              <Carousel 
                containerStyle={{height: 150}} 
                pageControlPosition={Carousel.pageControlPositions.OVER} 
                pageControlProps={{
                  size: 10, 
                  color: Colors.blue30, 
                  inactiveColor: Colors.grey40
                }}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
              <PropSection title="圆点指示器 (下方)" propName="pageControlPosition | pageControlProps">
              <Carousel 
                containerStyle={{height: 150}} 
                pageControlPosition={Carousel.pageControlPositions.UNDER} 
                pageControlProps={{
                  size: 15, 
                  color: Colors.grey40, 
                  inactiveColor: Colors.blue30
                }}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>

            <PropSection title="数字计数器1" propName="showCounter | counterTextStyle">
              <Carousel 
                containerStyle={{height: 150}} 
                showCounter={true}
                counterTextStyle={{
                  fontSize: 16, 
                  fontWeight: 'bold', 
                  color: Colors.white,
                  backgroundColor: 'rgba(0,0,0,0.5)',
                  padding: 5,
                  borderRadius: 5
                }}
              >
                {this.renderPages(4)}
              </Carousel>
            </PropSection>

            <PropSection title="数字计数器2" propName="showCounter | counterTextStyle">
              <Carousel 
                containerStyle={{height: 150}} 
                showCounter={true}
                counterTextStyle={{
                  fontSize: 20, 
                  fontWeight: 'bold', 
                  color: Colors.blue30,
                  backgroundColor: 'rgba(240, 216, 7, 0.5)',
                  padding: 5,
                  borderRadius: 5
                }}
              >
                {this.renderPages(4)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="initialPage: 设置初始显示的页面索引">
            <PropSection title="从第 0 页开始" propName="initialPage=0">
              <Carousel containerStyle={{height: 100}} initialPage={0}>
                {this.renderPages(3)}
              </Carousel>
            </PropSection>

            <PropSection title="从第 2 页开始" propName="initialPage=2">
              <Carousel containerStyle={{height: 100}} initialPage={2}>
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="containerStyle: 容器的边距与内边距">
            <PropSection title="容器垂直内边距containerPaddingVertical={20}" propName="containerPaddingVertical">
              <View bg-grey70>
                <Carousel 
                  containerStyle={{height: 150}} 
                  containerPaddingVertical={20}
                  pageWidth={200}
                >
                  {this.renderPages(3, 200)}
                </Carousel>
              </View>
            </PropSection>

            <PropSection title="容器垂直内边距containerPaddingVertical={50}" propName="containerPaddingVertical">
              <View bg-grey70>
                <Carousel 
                  containerStyle={{height: 150}} 
                  containerPaddingVertical={50}
                  pageWidth={200}
                >
                  {this.renderPages(3, 200)}
                </Carousel>
              </View>
            </PropSection>
          </TestCase>

           <TestCase itShould="onChangePage: 监听页面切换">
            <View bg-grey80 padding-10 marginB-10>
              <Text text70 center>当前索引: {this.state.currentPageIndex}</Text>
            </View>
            <Carousel 
              containerStyle={{height: 150}} 
              onChangePage={(index) => this.setState({currentPageIndex: index})}
            >
              {this.renderPages(5)}
            </Carousel>
          </TestCase>

          <TestCase itShould="pageHeight: 垂直方向固定页面高度">
            <PropSection title="垂直滚动 + 固定页高pageHeight={50}" propName="pageHeight | horizontal=false">
              <View style={{height: 200, borderWidth: 1, borderColor: Colors.grey40}}>
                <Carousel 
                  containerStyle={{flex: 1}} 
                  horizontal={false}
                  pageHeight={50}
                  initialPage={0}
                >
                  {this.renderPages(5, undefined, 100)}
                </Carousel>
              </View>
            </PropSection>
          </TestCase>

          <TestCase itShould="pageHeight: 垂直方向固定页面高度">
            <PropSection title="垂直滚动 + 固定页高pageHeight={20}" propName="pageHeight | horizontal=false">
              <View style={{height: 200, borderWidth: 1, borderColor: Colors.grey40}}>
                <Carousel 
                  containerStyle={{flex: 1}} 
                  horizontal={false}
                  pageHeight={20}
                  initialPage={0}
                >
                  {this.renderPages(5, undefined, 100)}
                </Carousel>
              </View>
            </PropSection>
          </TestCase>

          <TestCase itShould="onScroll & pagingEnabled: 滚动回调与分页控制">
            <PropSection title="监听 onScroll (X轴偏移量)" propName="onScroll">
              <Text text80 purple30 marginB-5>Scroll Offset X: {Math.round(this.state.scrollOffset)}</Text>
              <Carousel 
                containerStyle={{height: 150}} 
                onScroll={(event) => {
                  const offsetX = event.nativeEvent.contentOffset.x;
                  this.setState({scrollOffset: offsetX});
                }}
              >
                {this.renderPages(4)}
              </Carousel>
            </PropSection>

            <PropSection title="禁用分页吸附 (自由滚动)" propName="pagingEnabled=false">
              <Carousel 
                containerStyle={{height: 150}} 
                pagingEnabled={false}
              >
                {this.renderPages(4)}
              </Carousel>
            </PropSection>
          </TestCase>

          <TestCase itShould="allowAccessibleLayout & animated: 布局属性">
            <PropSection title="启用无障碍布局" propName="allowAccessibleLayout">
              <Carousel 
                containerStyle={{height: 150}} 
                allowAccessibleLayout={true}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>

            <PropSection title="启用容器动画 (Height Change)" propName="animated">
              <Button 
                label={this.state.isExpanded ? "收起高度 (动画)" : "展开高度 (动画)"}
                size="xSmall"
                onPress={this.toggleHeight}
                marginB-10
              />
              <Carousel 
                containerStyle={{height: this.heightAnim}} 
                animated={true}
              >
                {this.renderPages(3)}
              </Carousel>
            </PropSection>
          </TestCase>

        </ScrollView>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  scrollContent: {
    padding: 20,
    paddingBottom: 50,
  },
  sectionContainer: {
    marginBottom: 20,
    marginTop: 10,
    borderBottomWidth: 1,
    borderColor: Colors.grey80,
    paddingBottom: 20,
  },
});